<template>
  <div>
    <el-card :class="['cardInTab']" shadow="never" key="card5">
      <el-row>
        <el-form ref="addSkuRef"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="SKU编码:">
                <el-input v-model="prodNewSkuFormData.code"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="名称:">
                <el-input type="textarea" v-model="prodNewSkuFormData.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="价格(¥):">
                <el-input v-model="prodNewSkuFormData.price"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="库存量(件):">
                <el-input v-model="prodNewSkuFormData.count"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :class="['topLine']" v-if="prodNewSkuFormData.attrs.length>0">

            <el-row>
              <el-col :span="2">
                <h1>属性</h1>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" v-for="attr in prodNewSkuFormData.attrs" :key="attr.id">
                <el-form-item :label="attr.name">
                  <el-input type="textarea" v-model="attr.value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-row>
          <el-row :class="['topLine']" v-if="prodNewSkuFormData.specs.length>0">

            <el-row>
              <el-col :span="2">
                <h1>规格</h1>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" v-for="spec in prodNewSkuFormData.specs" :key="spec.id">
                <el-form-item :label="spec.name">
                  <el-input type="textarea" v-model="spec.value"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-row>
        </el-form>
      </el-row>
      <el-row :class="['btnBar']">
        <el-button-group>
          <el-button type="info" @click="handleCancelAddSKUButtonClick">取消</el-button>
          <el-button type="primary" @click="handleConfirmAddSKUButtonClick">提交</el-button>
        </el-button-group>
      </el-row>

    </el-card>
  </div>
</template>

<script>

  import {mapState, mapMutations} from 'vuex';
  import ImageListEdit from '../comp/ImageListEdit'
  import {prodTabNameList} from "../../config/variable";

  export default {
    name: "ProdSkuAdd",
    components: {ImageListEdit},
    data() {
      return {}
    },

    activated: {},

    computed: {
      ...mapState({
        ossServer:state=>state.prod.ossServer,
        imageServer: state=>state.prod.imageServer,
        prodCurrentSku: state=>state.prod.prodCurrentSku,
        prodNewSkuFormData: state=>state.prod.prodNewSkuFormData,
        prodCurrentSpu: state=>state.prod.prodCurrentSpu
      })
    },


    methods: {
      ...mapMutations(['setOssServer', 'setImageServer', 'setProdActiveTabName']),

      //取消添加SKU
      handleCancelAddSKUButtonClick() {
        this.setProdActiveTabName(prodTabNameList.prodDetails);
      },

      //确认添加SKU
      async handleConfirmAddSKUButtonClick() {
        const result = await this.$confirm("您确定要添加?", '提示').catch(error => null);
        if (result === 'confirm') {
          this.api.__api__ProductSkuAdd(this.prodNewSkuFormData)
            .then(data => {

              this.api.__api__ProductSpuSkus(this.prodCurrentSpu.id)
                .then(data1 => {
                  this.prodCurrentSpu.skus = data1.data;
                  this.setProdActiveTabName(prodTabNameList.prodDetails);
                })
                .catch(error => {
                  console.error(error);
                })

              this.$message.success(data.message);
            })
            .catch(error => {
              console.log(error);
            });
        }

      },
    }
  }
</script>

<style scoped>

</style>
